<template>
	<view class="container-mine">
		<image src="https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/mineHead-icon.png" mode='widthFix' alt="" />
		<section>
			<image class="head-yun"
				src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/82747310-0bf4-4f33-81d2-f2b314f73c71.png"
				mode='widthFix' alt="" />
			<view class='head-userInfo'>
				<view class='head-userInfo-left' @click="goLogin">
					<view class='avater'>
						<image src='https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/default-avatar.png' v-if="!userDetail.avatar" mode='widthFix' alt="" />
						<image :src="userDetail.avatar" v-else mode='aspectFit|aspectFill|widthFix' alt="" />
					</view>
					<view class='userInfo'>
						<view class='userInfo-name'>
							<view>{{ userDetail.username }}</view>
							<view class='userInfo-level'>{{ userDetail.levelName }}</view>
						</view>
						<view class='userInfo-id' v-if="userDetail.userId">ID:{{ userDetail.userId }}</view>
					</view>
				</view>
				<view class='edit-userInfo' v-if="userDetail.userId"
					@click="$goPath(2, `/pagesA/pocketShop/mine/userInfo?userDetail=${encodeURIComponent(JSON.stringify(userDetail))}`)">编辑个人资料</view>
			</view>

			<view class='head-svip' v-if="settingDetail.settingValue == 1">
				<image :src="userDetail.cardImg" mode='widthFix' alt="" />
				<view class='svip-box' @click="$goPath(2, `/pagesA/pocketShop/mine/gradeDetail`)">
					<view class='svip-title'>升级会员，享受尊贵特权</view>
					<view class='svip-btn flex-box'>等级明细</view>
				</view>
			</view>

			<view class='mine-card'>
				<view class='doudou-card' @click="goMyCard()">{{ ddkList.length }}
				</view>
				<view class='withdrawal-card' @click="goMyWallet()">{{ userDetail.availableBalance || 0 }}</view>
			</view>

			<view class='mine-orders'>
				<view class='order-all'>
					<view class='order-title'>
						商城订单
					</view>
					<view @click="goOrder('all')" style="display: flex;align-items: center;">
						<text style="display: block;">全部订单</text>
						<u-icon name="arrow-right" color='#666666' size="18"></u-icon>
					</view>
				</view>
				<view class='order-types'>
					<view class='order-types-item' v-for="(item,index) in orderTypes" :key="index" @click="goOrder(item.type)">
						<u-badge :absolute="true" :offset="[-8,-4]" type="error" max="99" :value="item.num" shape="circle" class="badge"></u-badge>
						<image :src="item.icon" alt="" mode='aspectFit|aspectFill|widthFix' />
						<view class='order-types-item-title '>{{ item.title }}</view>
					</view>
				</view>
			</view>

			<view class='menu-title'>常用功能</view>
			<view class='mine-menu'>
				<view class='menuList-item' v-for="(item, index) in menuList" :key="index" @click="goPath(index)">
					<image :src="item.icon" alt="" mode='widthFix' />
					<text>{{ item.title }}</text>
				</view>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			<view class='mine-info'>
				<view>© 杭州倪王 版权所有 浙ICP备2023008165号-4A</view>
				<view>杭州倪王科技有限公司</view>
				<view>客服电话: <text @click="handleCall('4009915775')">4009915775</text></view>
				<view><text>关于我们</text></view>
			</view>
			<!-- #endif -->
		</section>

		<tabbar :currentTab='2' :type="0" />

	</view>
</template>

<script>
	import {
		getUserInfo,
		setUserInfo
	} from '@/common/auth';
	export default {
		data() {
			return {
				value: 3,
				orderTypes: [{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/unpaid.png',
						title: '待付款',
						type: 0
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/unshipped.png',
						title: '待发货',
						type: 1
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/shipped.png',
						title: '已发货',
						type: 2
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/complete.png',
						title: '已完成',
						type: 3
					},
				],
				menuList: [{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/share-icon.png',
						title: '分享有礼'
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/address-icon.png',
						title: '收货地址'
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/wallet-icon.png',
						title: '钱包'
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/authentication-icon.png',
						title: '实名认证'
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/cardLibrary-icon.png',
						title: '兜兜卡库'
					},
					{
						icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/bind-icon.png',
						title: '绑定邀请码'
					},
					{ icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/kf.png', title: '联系客服' },
					// { icon: 'https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/setting-icon.png', title: '设置' },
				],
				userDetail: {
					cardImg: 'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/e9dd2345-4bfd-45a6-87e5-151d96970133.png',
					levelImg: 'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/2dd69291-5d07-4fb5-8b37-2d0a5771de6d.png',
					levelName: '普通用户',
					username: '您还未登录，点击这里登录',
					avatar: '',
				},
				ddkList: [],
				settingDetail: {},
				totalProfit: ''
			}
		},
		onShow() {
			if (getUserInfo()) {
				this.getUserDetail();
				this.getUserOrderCount();
				this.getSysrmSettings();
			}
		},
		onLoad() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		methods: {
			// 去登录
			goLogin() {
				if (!getUserInfo()) {
					this.$goPath(2, `/pages/pocketShop/mine/login`)
				}
			},
			//获取个人信息
			async getUserDetail() {
				let info = getUserInfo()
				let result = await this.$request.userInformation({
					userId: info.userId
				})
				this.totalProfit = result.data?.totalProfit
				let level = result.data?.level
				switch (level) {
					case 0: //普通用户
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/e9dd2345-4bfd-45a6-87e5-151d96970133.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/2dd69291-5d07-4fb5-8b37-2d0a5771de6d.png';
						result.data.levelName = '普通用户';
						break;
					case 1: //vip
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/ce0f5978-d718-48b2-9dcc-ab3b4b174db9.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/6a8f0ab6-f4f2-4896-b13d-d269d74691a5.png';
						result.data.levelName = 'vip';
						break;
					case 2: //svip
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/74b82978-aeff-4d07-88fb-47c154ad5c0a.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/ca862bf7-edcc-49fe-b49d-1f69fdd795a1.png';
						result.data.levelName = 'svip';
						break;
					case 3: //兜董
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/2d53dc60-2f10-4f64-ac1f-79426cd6ea1e.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/e6aa8bd9-939c-4f47-b706-155f4c6e65a4.png';
						result.data.levelName = '兜董';
						break;
					case 4: //兜主
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/6c5957f7-e9e7-4e00-b5d2-d7356748df71.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/406615a9-f8c9-41b3-80c2-32a988e59cbe.png';
						result.data.levelName = '兜主';
						break;
					case 5: //兜王
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/14483324-a477-4b3b-95cf-9932f77c8a67.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/62c2510f-52ed-4b38-a627-65886440b3f6.png';
						result.data.levelName = '兜王';
						break;
					default: //默认普通用户
						result.data.cardImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/e9dd2345-4bfd-45a6-87e5-151d96970133.png';
						result.data.levelImg =
							'https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/2dd69291-5d07-4fb5-8b37-2d0a5771de6d.png';
						result.data.levelName = '普通用户';
						break;
				}
				this.userDetail = result.data;
				setUserInfo(this.userDetail)

				let cardList = await this.$request.cardFindByList({
					userId: info.userId
				})
				this.ddkList = cardList.data;
			},
			//获取用户订单数量
			async getUserOrderCount() {
				const {
					orderTypes
				} = this;
				let info = getUserInfo()
				let result = await this.$request.orderOrderNum({
					userId: info.userId
				})
				const {
					data
				} = result
				orderTypes[0].num = data.waitPay;
				orderTypes[1].num = data.waitSend;
				orderTypes[2].num = data.delivery;
				orderTypes[3].num = data.complete;
			},
			//获取系统设置
			async getSysrmSettings() {
				let result = await this.$request.systemSettingsGet({
					key: 'mem_rule_show'
				})
				this.settingDetail = result.data;
			},
			// 跳转订单
			goOrder(type) {
				if (!getUserInfo()) return this.$toast('您还未登录，快去登录吧')
				this.$goPath(2, `/pagesA/pocketShop/mine/orderList?orderType=${type}`)
			},
			// 常用功能跳转
			goPath(i) {
				let info = getUserInfo()
				let {
					totalProfit
				} = this
				if (!info) return this.$toast('您还未登录，快去登录吧')
				switch (i) {
					case 0:
						this.$goPath(2, '/pagesA/pocketShop/mine/share') //用户分享
						break
					case 1:
						this.$goPath(2, '/pagesA/pocketShop/mine/address') //收货地址
						break
					case 2:
						this.$goPath(2, `/pagesA/pocketShop/mine/wallet?totalProfit=${totalProfit}`) //我的钱包
						break
					case 3:
						this.$goPath(2, '/pagesA/pocketShop/mine/auth') //实名认证
						break
					case 4:
						this.$goPath(2, '/pagesA/pocketShop/mine/unCard') //兜兜卡库
						break
					case 5:
						this.$goPath(2, '/pagesA/pocketShop/mine/bindCode') //绑定邀请码
						break
					case 6:
						this.$goPath(2, '/pagesA/pocketShop/mine/service') //意见反馈
						break
					case 7:
						this.$goPath(2, '/pagesA/pocketShop/mine/setting') //设置
						break
				}
			},
			//跳转到兜兜卡
			goMyCard() {
				if (!getUserInfo()) return this.$toast('您还未登录，快去登录吧')
				this.$goPath(2,'/pagesA/pocketShop/mine/bills?billsType=ddk')
			},
			//跳转到钱包
			goMyWallet() {
				if (!getUserInfo()) return this.$toast('您还未登录，快去登录吧')
				let {
					totalProfit
				} = this
				this.$goPath(2, `/pagesA/pocketShop/mine/wallet?totalProfit=${totalProfit}`)
			},

			handleCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		overflow-y: hidden;
	}

	.container-mine {
		width: 100%;
		height: 100vh;
		font-size: 28rpx;
		color: #333;
		font-family: 'PingFang SC-Medium';
		background: #FED14E;
		overflow-y: hidden;
		padding: 0 24rpx;
		box-sizing: border-box;

		image {
			width: 100%;
			height: auto;
			display: block;
		}

		section {
			height: 100%;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			box-sizing: border-box;
			/* 兼容 iOS < 11.2 */
			padding-bottom: calc(constant(safe-area-inset-bottom) + 160rpx); 
			/* 兼容 iOS >= 11.2 */
			padding-bottom: calc(env(safe-area-inset-bottom) + 160rpx);
			margin-top: 20px;

			.head-yun {
				position: relative;
				top: -30rpx;
				z-index: 10;
			}

			.head-userInfo {
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				top: -150rpx;
				z-index: 100;

				.head-userInfo-left {
					display: flex;
					align-items: center;

					.avater {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50% 50%;
						background-color: #fff;

						image {
							width: 100%;
							height: 100%;
							display: block;
							border-radius: 50% 50%;
						}
					}

					.userInfo {
						margin-left: 24rpx;
						padding-top: 40rpx;
						box-sizing: border-box;

						.userInfo-name {
							font-family: 'PingFang SC-Bold';
							font-size: 32rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.userInfo-level {
							line-height: 36rpx;
							padding: 2rpx 8rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 24rpx;
							font-size: 20rpx;
							margin-left: 6rpx;
							color: #fff;
							background-color: #FFBD32;
							font-family: 'PingFang SC-Medium';
							box-sizing: border-box;
						}

						.userInfo-id {
							font-size: 26rpx;
							font-family: 'DIN-Regular';
						}

					}

				}


				.edit-userInfo {
					margin-top: 54rpx;
					width: 200rpx;
					line-height: 48rpx;
					font-size: 20rpx;
					font-family: 'PingFang SC-Medium';
					color: #FFFFFF;
					border-radius: 48rpx 0 0 48rpx;
					text-align: center;
					background-color: #FFBD32;
				}

			}

			.head-svip {
				width: 100%;
				padding: 0 32rpx;
				position: relative;
				box-sizing: border-box;
				top: -140rpx;

				image {
					width: 100%;
					height: auto;
					display: block;
				}

				.svip-box {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 100;
					width: 100%;
					height: 100%;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 56rpx;
					box-sizing: border-box;

					.svip-title {
						padding-top: 8%;
						color: #EA7B7A;
					}

					.svip-btn {
						display: flex;
						align-items: center;
						justify-content: center;
						height: 52rpx;
						color: #FFFFFF;
						background: linear-gradient(270deg, #E94F73 0%, #EE927D 100%);
						border-radius: 26rpx;
						font-family: 'PingFang SC-Bold';
						padding: 0 30rpx;
					}
				}
			}

			.mine-card {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32rpx;
				box-sizing: border-box;
				background-color: #fff;
				margin-bottom: 36rpx;
				position: relative;
				top: -130rpx;

				view {
					width: 50%;
					height: 160rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					color: #fff;
					font-size: 56rpx;
					font-family: 'DIN-Medium';
					padding-top: 64rpx !important;
					box-sizing: border-box;
				}

				.doudou-card {
					background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/ddk.png);
					padding-left: 32rpx;
				}

				.withdrawal-card {
					background-image: url(https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/txj.png);
					padding-left: 28rpx;
				}

			}

			.mine-orders {
				width: 100%;
				background-color: #fff;
				padding: 0 24rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;
				position: relative;
				top: -130rpx;

				.order-all {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #666;

					.image {
						width: 12rpx;
						height: 24rpx;
						display: block;
						margin-left: 10rpx;
					}

					.order-title {
						font-size: 36rpx;
						font-family: 'PingFang SC-Bold';
						color: #333333;
						font-weight: 500;
					}
				}

				.order-types {
					display: flex;
					justify-content: space-around;
					margin-top: 36rpx;

					.order-types-item {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-size: 28rpx;
						color: #666;
						position: relative;
						// .badge {
						//   position: absolute;
						//   top: -10rpx;
						//   right: -10rpx;
						//   z-index: 999999;
						// }
						

						image {
							width: 44rpx;
							height: 40rpx;
							display: block;
							margin-bottom: 8rpx;
							margin-left: 16rpx;
						}
					}
				}


			}

			.menu-title {
				padding-left: 32rpx;
				margin-bottom: 36rpx;
				font-size: 36rpx;
				font-family: 'PingFang SC-Bold';
				color: #333333;
				font-weight: 500;
				box-sizing: border-box;
				position: relative;
				top: -130rpx;
			}

			.mine-menu {
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				position: relative;
				top: -130rpx;

				.menuList-item {
					padding-bottom: 24rpx;
					width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #666;
					font-size: 28rpx;

					image {
						width: 44rpx;
						height: 44rpx;
						display: block;
						margin-bottom: 10rpx;
					}
				}
			}

			.mine-info {
				background-color: #fff;
				text-align: center;
				font-size: 24rpx;
				position: relative;
				top: -50rpx;

				view {
					margin-bottom: 16rpx;

					span {
						text-decoration: underline;
					}

				}

			}


		}

	}

	.container-mine::-webkit-scrollbar {
		width: 0 !important;
	}
</style>